<!DOCTYPE html>
<html lang="en">
<head>
	<title>Nokia Mobile Web Components</title>
	<meta charset="utf-8" >
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<meta name="author" content="">
	<meta name="description" content="" />
	<meta name="keywords" content="" />
	<link rel="shortcut icon" href="resources/images/favicon.ico" />
	<link rel="stylesheet" href="resources/styles/nokia.mwc-1.0.css" media="screen, handheld" />
	<script src="resources/scripts/nokia.mwc-1.0.js"></script>
	<script>
		function init() {
			var main_menu = SlidingDrawer({"id":"top"});
			
			var slideshow_options = {
				"id":"example-slideshow",
				"loop":true,
				"autoplay":5000
			};
			var slideshow = Slideshow(slideshow_options);
			
		}
		addEvent(window, "load",init);
	</script>
</head>
<body>
	<header id="top" class="sliding-drawer">
		<img src="resources/images/component.png" alt="component" />
		<h1>Mobile Web Components</h1>
		<p>On <a href="https://projects.developer.nokia.com/mobile_web_components">projects.developer.nokia.com</a></p>
		<nav>
			<ul>
				<li><a href="index.html">Overview</a></li>
				<li><a href="collapsible.html">Collapsible</a></li>
				<li><a href="scrollable.html">Scrollable</a></li>
				<li><a href="pop-up-menu.html">Pop-up Menu</a></li>
				<li><a href="sliding-drawer.html">Sliding Drawer</a></li>
				<li><a href="slideshow.html">Slideshow</a></li>
				<li><a href="miscellaneous.html">Miscellaneous</a></li>
			</ul>
		</nav>
	</header>
	<header>
		<h2>Slide show</h2>
		<p>An easy means of navigating through a list of images.</p>
	</header>
	<figure>
	  		<img src="resources/images/headers/flickr-defalkner-5532767706.jpg" />
			<figcaption>Original photo licensed under <a href="http://creativecommons.org/licenses/by/2.0/deed.en" rel="license" title="Creative Commons: Attribution 2.0 Generic (CC BY 2.0)">Creative Commons</a> by <a href="http://www.flickr.com/photos/defalkner/5532767706" title="Water slides">defalkner</a></figcaption>
	</figure>
	<nav id="contents">
		<h4>Contents</h4>
		<ol>
			<li><a href="#intro">Introduction</a></li>
			<li><a href="#usage">General Usage</a></li>
			<li><a href="#properties">Properties & Functions</a></li>
			<li><a href="#demo">Demo: Slideshow</a></li>
		</ol>
	</nav>
	<h3 id="intro">Introduction</h3>
	<p>The slideshow component provides a means of navigating through a list of images (or other content). If supported, the component uses hardware accelerated CSS3 transitions to smoothly fade between images, and can be set to autoplay if desired. </p>
	<h3 id="usage">General Usage</h3>
	<p>The slideshow consists of an ordered list <code>&lt;ol&gt;</code> within a container element (such as an <code>&lt;article&gt;</code> or <code>&lt;div&gt;</code>). The &quot;slideshow&quot; class should be applied to the container element and a title can also be added using an <code>&lt;h4&gt;</code> nested within the container.</p>
<!-- *PRE-FORMATTED CODE SNIPPET -->
<code>
<h4>HTML</h4>
<pre>
&lt;article id=&quot;photos&quot; class=&quot;slideshow&quot;&gt;
  &lt;h4&gt;{title}&lt;/h4&gt;
    &lt;ol&gt;
      &lt;li&gt;&lt;!-- content --&gt;&lt;/li&gt;
      ...
    &lt;/ol&gt;
&lt;/article&gt;
</pre>
	</code>
<!-- /PRE-FORMATTED CODE SNIPPET -->
	<p>The above code snippet defines the basic structure of a slide show component.</p>
<!-- *PRE-FORMATTED CODE SNIPPET -->
<code>
<h4>JavaScript</h4>
<pre>
var options = {
  "id":"photos",
  "loop":"false",
  "autoplay":5000
};
var flickrphotos = Slideshow(options);
</pre>
</code>
<!-- /PRE-FORMATTED CODE SNIPPET -->
	<p>Once the slide show structure has been created we can then wire things up with the JavaScript shown above. The id specified should correspond to the id assigned to the slideshow's <code>&lt;article&gt;</code> element. The slide show is not set to loop or auto-play by default, but can these behaviours can be customized using the (optional) options provided.</p>
	<p><strong>Note:</strong> This component uses JavaScript for animations as <code>scrollTop</code> and <code>scrollLeft</code> cannot be manipulated via CSS.</p>
	<h3 id="properties">Properties & Functions</h3>
		<table>
			<tr><td>id</td><td>#id of DOM element</td></tr>
			<tr><td>loop</td><td>true | false</td></tr>
			<tr><td>autoplay</td><td># milliseconds (ie: 1000)</td></tr>
			<tr>
				<td>back()</td>
				<td>display the previous slide</td></tr>
			<tr>
				<td>next()</td>
				<td>display the next slide</td></tr>
			<tr>
				<td>goto(slide)</td>
				<td>goto a specific slide number</td></tr>
		</table>	
	<h3 id="demo">Demo</h3>
	<p>An example of the slideshow can be found below.</p>
	<article id="example-slideshow" class="slideshow">
		<h4>Demo slideshow</h4>
		<ol>
			<li><img src="resources/images/slideshow/flickr-mediafury-3738012168.jpg" width="320" height="300" /></li>
			<li><img src="resources/images/slideshow/flickr-canvasmag-4360890866.jpg" width="320" height="300" /></li>
			<li><img src="resources/images/slideshow/flickr-byebyeempire-139059573.jpg" width="320" height="300" /></li>
			<li><img src="resources/images/slideshow/flickr-vincentghyssens-3071053062.jpg" width="320" height="300" /></li>
			<li><p style="text-align: center; baseline: center; color: white; padding: 5em 2em;">Original photos licensed under <a href="http://creativecommons.org/licenses/by/2.0/deed.en" rel="license" title="Creative Commons: Attribution 2.0 Generic (CC BY 2.0)">Creative Commons</a> by <a href="http://www.flickr.com/photos/byebyeempire/139059573.jpg">byebyeempire</a>, <a href="http://www.flickr.com/photos/canvasmag-4360890866.jpg">canvasmag</a>, <a href="http://www.flickr.com/photos/vincentghyssens/3071053062.jpg">vincentghyssens</a> and <a href="http://www.flickr.com/photos/mediafury/3738012168.jpg">mediafury</a>.</p></li>
		</ol>
	</article>
	<p><strong>Tip:</strong> The slideshow component is not limited to displaying images. Any content that is included within the <code>&lt;li&gt;</code>element will be displayed, as shown on the final slide. Testing is of course recommended to ensure this new content displays as expected.</p>
	<nav><a href="#top" class="top">back to top</a></nav>
	<footer>
		<nav>
			<ul>
				<li><a href="https://projects.developer.nokia.com/home/">Nokia Projects</a></li>
				<li><a href="http://developer.nokia.com/home/">Developer.nokia.com</a></li>
			</ul>
		</nav>
		<p>Components licensed Creative Commons <a href="http://creativecommons.org/licenses/by/2.0/">CC-BY 2.0</a></p>
	</footer>
</body>
</html>

